<template>
  <!-- 首页 -->
  <div class="my-home">
    <div>
      <el-card class="box-card" :body-style="{padding: '10px' }">
        <!-- 搜索框 -->
        <el-input placeholder="请输入内容" class="input-with-select" v-model="searchKeyword" clearable
                  @keyup.enter="search">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
        <el-badge :value="200" :max="99" class="item">
          <el-button type="danger" icon="el-icon-shopping-cart-full"
            @click="myCart()">我的购物车</el-button>
        </el-badge>

        <!-- 标签栏 -->
        <div class="my-tabs">
          <el-link :underline="false" href="/home">首页</el-link>
          <el-link :underline="false" href="/product">商品列表</el-link>
          <el-link :underline="false">秒杀专场</el-link>
          <el-link :underline="false">优惠卷</el-link>
          <el-link :underline="false">预发布</el-link>
          <el-link :underline="false">新人专享</el-link>
          <el-link :underline="false">会员专区</el-link>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import siblingCall from "@/router/siblingCall";

  export default {
    name: "myContent",

    data() {
      return {
        searchKeyword: ''
      }
    },

    methods: {

      // 我的购物车
      myCart(){
        this.$router.push("/cart");
      },

      // 搜索框搜索
      search() {
        // 获取当前URL
        const url = window.location.href;
        // 包含 product 不路由，不包含就路由到商品列表页
        if (url.indexOf("/product") >= 0) {
          this.$router.push("/product?q=" + this.searchKeyword);
          // TriggerSearch是事件名字，TriggerParam是参数()
          // 没有参数，可直接写成siblingCall.$emit("TriggerSearch");
          siblingCall.$emit("TriggerSearch", this.searchKeyword);
        } else {
          this.$router.push("/product?q=" + this.searchKeyword);
        }
      }
    }

  }
</script>

<style scoped>
  .my-home {
    background-color: #F2F6FC;
    width: 100%;
  }

  .input-with-select {
    width: 525px;
    margin: auto;
  }

  .my-tabs {
    margin-top: 15px
  }

  .my-tabs a {
    margin: 0 11px;
    font-weight: 600;
    font-size: 16px;
    color: #c81623;
  }
</style>
